<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<script type="text/javascript" src="js/queryloader2.min.js" ></script>

		<style>
			body,html{
			    height: 100%;
			}
			.video{
				width: 11rem;
background-color: rgba(255,255,255,0.4);
border-radius: 3px;
height:6rem;
margin:auto;
border:1px solid #fff;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
			}
			
			.video.full{
				background-color:rgba(0,0,0,0.4);
				border:1px solid #000;
				color:#fff;
			}
		</style>
		
	</head>
	<body>
		<div style="height: 100%; display: none;" id="preload">
			
			<div class="thdw-container">
				<div class="bg"></div>
				<div class="thdw-body">
					<span class="file">
						<input type="file" id="file" />
						<img src='img/file.png' alt="file" />
					</span>					
					<br />
					<small>（视频大小不超过5M）</small>
					<br />
					<div class="video"></div>
					<br />
					<input type="text" placeholder="一句话为我家宝贝拉人气啦！" />
					<br />
					<img id="thdw-submit" class="thdw-submit" src="img/thdw-submit.png" alt="thdw-submit" />
					<br />
					<img class="prize" src="img/prize.png" alt="prize" />
				</div>
				<img class="bg01" src="img/bg01.png" alt="bg01" />
			</div>
	        <!--thdw-container end-->
	        
	        <div class="cover-form" style="display: none;">
				<div class="form-box">
					<div class="bg"></div>
					<div class="form-content">
						<p>请留下联系方式<br />方便工作人员通知你到现场领取奖品</p>
						<div class="form">姓名<input type="text" placeholder="请准确填写以免错过奖品" /></div>
						<div class="form">电话<input type="text" placeholder="请准确填写以免错过奖品" /></div>
						<a href="javascript:void(0);"><img id="submit" src="img/submit.png" alt="submit" /></a>
					</div>
				</div>
			</div>
			<!--cover-form end-->
			
	        <div id="share" class="share" style="display: none;"></div>
			<!--share end-->	        
	        
	        <!--活动规则-->
	        <div id="hdgz" style="display: none; position:absolute;left:0; top:0; width:100%; height:100%;">
		        <div class="cover-box">	        	
		            <div class="pop-box pop-level">
		                <div class="pop-close">
		                    <b></b>
		                </div>
		                <div class="pop-content">
							<h2>【活动规则】</h2>	                		                	
							<p><em>报名对象：</em>5-12岁小朋友，性别不限</p>
							<ul class="content01"><em>活动时间：</em>						
								<li>10月18日-10月24日网上投票</li>
								<li>10月25日&nbsp;&nbsp;初赛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;14:30-16:00</li>       
								<li>11月1日&nbsp;&nbsp;半决赛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;14:30-16:00</li>   
								<li>11月8日&nbsp;&nbsp;童话大王决赛及颁奖典礼&nbsp;&nbsp;14:30-17:00</li>   	
							</ul>
							<ul class="content02"><em>参赛细则：</em>
								<li>1.家长凭真实姓名、电话登陆凯德•世纪名邸微信平台，认证参赛资格；</li>
								<li>2.参赛题材：各种童话故事；</li>
								<li>3.上传儿童才艺表演原创微视频（视频大小不超过5M）（仅限1次，不能重复上传）；</li>
								<li>4.参赛者分享自己参赛成功的微信活动链接到朋友圈，邀请朋友投票，每个微信号每天限投1票；</li>
								<li>5.截止到活动结束，获取投票前30名小朋友可获得决赛资格。</li>	
							</ul>	           	                	
							<h2>【奖品设置】</h2>
							<p>丽星邮轮家庭旅行、香薰山谷景区家庭礼包</p>	                		                	        		                	
		                </div>
		            </div>
		        </div>
	        </div>
	        
	    </div>
	    
	    <script>
	        $("body").queryLoader2({
	            barColor: "#efefef",
	            backgroundColor: "#111",
	            percentage: true,
	            barHeight: 1,
	            minimumTime: 200,
	            fadeOutTime: 1000,
	            onComplete: function () {
	                $("#preload").show();
	                
                	$("#thdw-submit").on("click", function() {
						$(".cover-form").show();
					});
					$(".cover-form").on("click", function() {
						$(this).hide();
					});						
					$(".cover-form").find(".form-content").bind("click",function(e){
						e.stopPropagation();
					});
					$("#submit").on("click", function() {
						$("#share").show();
					});
					$("#share").on("click", function() {
						$(this).hide();
					});														
					
					
					$(".prize").on("click", function() {
						$("#hdgz").show();
					});
					$("#hdgz").on("click", function() {
						$(this).hide();
					});
					$("#file").bind("change",function(){
						
						var v=$(this).val();
						var _v=v.split("\\");
						v=_v[_v.length-1];
						$(".video").html(v);
						$(".video").addClass("full");
					});
	            }
	        });
		</script>
	</body>
</html>